<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/lg1200.css" media="screen and (min-width:1201px)">
    <link rel="stylesheet" href="./css/lg960.css"  media="screen and (min-width:961px) and (max-width:1200px)">
    <link rel="stylesheet" href="./css/lt960.css"  media="screen and (max-width:960px)">
</head>


<body>
    <!-- 屏幕宽度>=1201 4个项目 每个项目宽度 225px ,高度根据内容定
    1200>=屏幕宽度>=961  3个项目 每个项目宽度 170px ,高度根据内容定
度  2个项目 每个项目宽度 48% ,高度根据内容    960>=屏幕宽定 -->
    <div class="container">
        <div class="item">
            <div class="img-warpper">
                <img src="./img/2.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/3.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/4.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/5.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/6.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/7.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/8.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
        <div class="item">
            <div class="img-warpper">
                <img src="./img/9.jpg" alt="">
            </div>
            <h2>Title 01</h2>
            <p>图片描述</p>
        </div>
    </div>
</body>

</html>